<template>
  <view> 计算属性演示：</view>
  <view class=""> 分数：{{ scoreList }} </view>
  <view class="">优秀：{{ betterList }}</view>
</template>

<script setup>
  import { ref, computed } from 'vue'
  // 1. 定义响应式数据(reactive -> 定义复杂类型,ref-> 简单+复杂类型)
  const scoreList = ref([80, 90, 100, 60])
  // 定义一个计算属性(响应式的数据)
  const betterList = computed(() => {
    // 将scoreList中的数据过滤出来（条件式分数>=90）
    return scoreList.value.filter((item) => item >= 90)
  })

  // 2. 定义函数来操作这个响应式数据
  setTimeout(() => {
    // 向scoreList这个响应式数据中增加一个分数
    scoreList.value.push(95)
  }, 3000)
</script>

<style lang="scss"></style>
